import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import styles from './zhibo.module.css';

const ZhiBoHome = () => {
  const [selectedRole, setSelectedRole] = useState(null);

  return (
    <div className={styles.app}>
      {/* 网页头部 */}
      <div className={styles.header}>
        <h1>💬 实时聊天室</h1>
        <div className={styles.roleSelector}>
          <button 
            className={`${styles.roleButton} ${selectedRole === 'sender' ? styles.active : ''}`}
            onClick={() => setSelectedRole('sender')}
          >
            发送端
          </button>
          <button 
            className={`${styles.roleButton} ${selectedRole === 'receiver' ? styles.active : ''}`}
            onClick={() => setSelectedRole('receiver')}
          >
            接收端
          </button>
        </div>
      </div>
      
              {/* 主要内容区域 */}
        <div className={styles.mainContent}>
          {/* 模式选择器 */}
          {selectedRole && (
            <div className={styles.modeSelector}>
              {selectedRole === 'sender' && (
                <div className={styles.modeCard}>
                  <div className={styles.modeIcon}>💬</div>
                  <h2>聊天发送端</h2>
                  <p>发送消息给其他用户</p>
                  <div className={styles.featureList}>
                    <span className={styles.feature}>✓ 实时消息发送</span>
                    <span className={styles.feature}>✓ 用户名设置</span>
                    <span className={styles.feature}>✓ 消息历史</span>
                  </div>
                  <Link to="/chatroom/sender" className={styles.modeButton}>
                    进入发送端
                  </Link>
                </div>
              )}
              
              {selectedRole === 'receiver' && (
                <div className={styles.modeCard}>
                  <div className={styles.modeIcon}>👂</div>
                  <h2>聊天接收端</h2>
                  <p>接收和回复消息</p>
                  <div className={styles.featureList}>
                    <span className={styles.feature}>✓ 实时消息接收</span>
                    <span className={styles.feature}>✓ 消息回复</span>
                    <span className={styles.feature}>✓ 在线用户</span>
                  </div>
                  <Link to="/chatroom/receiver" className={styles.modeButton}>
                    进入接收端
                  </Link>
                </div>
              )}
            </div>
          )}
        
                  {/* 功能特色区域 */}
          <div className={styles.features}>
            <h3>✨ 功能特色</h3>
            <ul>
              <li>🔄 实时 WebSocket 连接，低延迟通信</li>
              <li>💬 支持文本消息发送与回复</li>
              <li>👤 用户名自定义设置</li>
              <li>📱 响应式设计，支持多设备</li>
              <li>🏠 固定房间 chat-room-001</li>
              <li>⚡ 自动重连机制</li>
              <li>🔒 安全的 WebSocket 连接</li>
            </ul>
          </div>
          
          {/* 使用提示 */}
          <div className={styles.audioTips}>
            <h3>💡 使用提示</h3>
            <p>1. <strong>发送端</strong>: 设置用户名后即可发送消息，支持回车键快速发送</p>
            <p>2. <strong>接收端</strong>: 可以接收消息并回复，支持实时消息更新</p>
            <p>3. <strong>连接问题</strong>: 如果连接断开，系统会自动重连，请耐心等待</p>
          </div>
      </div>
    </div>
  );
};

export default ZhiBoHome;